<template>
    <c-list-template title="销售申请订单" :operation="true">
        <template slot="search">
            <el-row :gutter="5">

                <el-col :span="6" class="flex-center ">
                    <div class="mr-lg">销售申请单号：</div>
                    <el-input v-model="querys.id" placeholder="请输入销售申请单号" class="wh flex-1 mr-lg" />
                </el-col>
                <el-col :span="6" class="flex-center ">
                    <div class="mr-lg">授信银行：</div>
                    <cBankList v-model="querys.bankId"></cBankList>
                </el-col>
                <el-col :span="6" class="flex-center ">
                    <div class="mr-lg">供应商名称：</div>
                    <el-input v-model="querys.name" placeholder="请输入供应商名称" class="wh flex-1 mr-lg" />
                </el-col>

                <el-col :span="6" class="flex-x-end  ">
                    <el-button icon="el-icon-search" type="primary" @click="handleSelect">搜索</el-button>
                    <el-button icon="el-icon-delete" @click="handleReset">重置</el-button>
                </el-col>
            </el-row>
        </template>
        <template slot="operation">
            <div class="flex-y-center">
                <el-button type="primary" @click="handleBatch">批量确认</el-button>
            </div>
        </template>
        <template slot="list">
            <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="tableData" v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="80" label="" align="center" :selectable="selectable" />
                <el-table-column type="index" width="80" label="序号" align="center" />
                <el-table-column label="销售申请单号" align="center" prop="id" />
                <el-table-column label="供应商名称" align="center" prop="sellerName" />
                <el-table-column label="授信银行" align="center" prop="bankName" />
                <el-table-column width="200" label="申请时间" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.timeCreate | dateYMDHMSFormat }}
                    </template>
                </el-table-column>
                <el-table-column width="" label="状态" align="center" prop="addressCity">
                    <template slot-scope="scope">
                        {{scope.row.status==null ? "" : orderStates[scope.row.status].label }}
                    </template>
                </el-table-column>
                <el-table-column width="150" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" v-if=" scope.row.status == 5" @click="handleDetails(scope.row,false)" :underline="false">确认订单</el-link>
                        <el-link type="primary" v-else-if=" scope.row.status == 7" @click="handleLoan(scope.row)" :underline="false">确认放款</el-link>
                        <el-link type="primary" v-else :underline="false" @click="handleDetails(scope.row,true)">详情</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template slot="pagination">
            <el-pagination background :current-page="querys.current" :page-sizes="[10, 20, 50, 100]" :page-size="querys.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </template>
    </c-list-template>
</template>
<script>
import { exportOrderState } from "@/utils/status.js";
export default {
    data () {
        return {
            total: 0,
            tableData: [],
            querys: {
                current: 1,
                size: 10,
            },
            loading: false,
            orderStates: exportOrderState,
            orderCheckList: []
        };
    },
    mounted () {
        this.tableList();
    },
    methods: {
        handleBatch () {
            if (this.orderCheckList.length == 0) {
                this.$message.warning("请选择批量处理的订单");
                return false;
            }
            this.$confirm("是否确认放款？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let step = 0
                this.orderCheckList.forEach(async (item) => {
                    const url = "/sellerCarInApply/loanPass?id=" + item.id;
                    await this.$post({ url }).then(() => {
                        step++;

                    });
                    if (step == this.orderCheckList.length) {
                        this.tableList();
                        this.$message.success("操作成功");
                    }
                })
            });
        },
        selectable: function (row, index) {
            if (row.status == 7) {
                return true;
            }
        },
        handleSelectionChange (val) {
            this.orderCheckList = val
        },
        handleLoan (item) {
            this.$confirm("是否确认放款？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                const url = "/sellerCarInApply/loanPass?id=" + item.id;
                // let data = {
                //     id: item.id
                // }
                this.$post({ url }).then((res) => {
                    this.tableList();
                    this.$message.success("操作成功");
                });
            });
        },
        handleDetails (item, isView) {
            this.$router.push({
                path: "/capital/bank/details",
                query: {
                    id: item.id,
                    isView: isView
                },
            });
        },
        tableList () {
            this.loading = true;
            const params = JSON.parse(JSON.stringify(this.querys));
            const url = "/bank/page";
            this.$get({ url, params }).then((res) => {
                this.tableData = res.records;
                this.total = res.total * 1;
                this.loading = false;
            });
        },
        handleReset () {
            this.querys = {
                current: 1,
                size: 10,
            };
            this.tableList();
        },
        handleSelect () {
            this.querys.current = 1;
            this.tableList();
        },
        handleSizeChange (val) {
            this.querys.size = val;
            this.tableList();
        },
        handleCurrentChange (val) {
            this.querys.current = val;
            this.tableList();
        },
    },
};
</script>
